<script lang="ts" setup name="SystemAuth">
import { ElMessage, ElTree } from 'element-plus'
import sysAuth from '@/api/modules/system/auth'

// 分页器
const tableShow = ref({
  // 页数
  page: 1,
  // 调试
  size: 10,
  // 总条数
  total: 0,
  // 加载状态
  loading: true,
})

// 表格
const data = ref([])

// 获取用户数据
const getList: any = () => {
  // 数据加载时分页器禁用
  tableShow.value.loading = true
  sysAuth.index({
    page: tableShow.value.page,
    size: tableShow.value.size,
  }).then((res: any) => {
    for (let i = 0; i < res.data.list.length; i++) {
      // 为改变登录状态预留
      res.data.list[i].loading = false
    }
    data.value = res.data.list
    // 总条数存储
    tableShow.value.total = res.data.total
  }).catch((e) => {
    console.log(e)
  }).finally(() => {
    // 解除分页器禁用
    tableShow.value.loading = false
  })
}

// 切换分页
function pageChange(num: number) {
  tableShow.value.page = num
  getList()
}

// 切换数目
function sizechange(num: number) {
  tableShow.value.size = num
  getList()
}

// 显隐新增用户对话框
const viewVisible = ref<boolean>(false)
// 新增按钮加载控制
const viewLoading = ref<boolean>(false)
// 当前查看的ID
const viewID = ref<number>(0)
// 拥有权限
const idsData = ref([])
// 全部权限
const listData = ref([])
const view: any = (row: any) => {
  idsData.value = []
  sysAuth.view({
    id: row.id,
  }).then((res: any) => {
    viewID.value = row.id
    idsData.value = res.data.ids
    listData.value = res.data.list
    viewVisible.value = true
  })
}

const tree = ref<InstanceType<typeof ElTree>>()
// 修改拥有的权限
const edit: any = () => {
  const ids = tree.value!.getCheckedKeys().toString()
  sysAuth.edit({
    ids,
    id: viewID.value,
  }).then((res: any) => {
    if (res.code === 200) {
      ElMessage({
        message: res.msg,
        type: 'success',
      })
      getList()
      viewVisible.value = false
      viewID.value = 0
      idsData.value = []
    }
    else {
      ElMessage({
        message: res.msg,
        type: 'warning',
      })
    }
  })
}

// 显隐新增用户对话框
const addVisible = ref<boolean>(false)
// 新增按钮加载控制
const addLoading = ref<boolean>(false)
// 新增用户
const addForm = ref({
  name: '',
})
// 打开或关闭新增用户对话框
const add: any = (type: boolean) => {
  addVisible.value = type
  addForm.value = {
    name: '',
  }
}

// 新增用户
const addUser: any = () => {
  // 按钮开启加载禁用
  addLoading.value = true
  sysAuth.add(addForm.value).then((res: any) => {
    if (res.code === 200) {
      ElMessage({
        message: res.msg,
        type: 'success',
      })
      getList()
      add(false)
    }
    else {
      ElMessage({
        message: res.msg,
        type: 'warning',
      })
    }
  }).catch((e) => {
    console.log(e)
  }).finally(() => {
    // 按钮解除加载禁用
    addLoading.value = false
  })
}
onMounted(() => {
  getList()
})
</script>

<template>
  <div>
    <page-main>
      <el-button @click="add(true)">
        <template #icon>
          <el-icon>
            <svg-icon name="ep:add-location" />
          </el-icon>
        </template>
        新增
      </el-button>
      <!-- 表格 -->
      <el-table
        v-loading="tableShow.loading"
        class="m-t-20" :border="true" :data="data" style="width: 100%;"
      >
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="permission_name" label="部门/职位" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="warning" @click="view(scope.row)">
              编辑权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-model:currentPage="tableShow.page"
        v-model:page-size="tableShow.size"
        class="m-t-20"
        :disabled="tableShow.loading"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout="->,otal, sizes, prev, pager, next, jumper"
        :total="tableShow.total"
        @current-change="pageChange"
        @size-change="sizechange"
      />
    </page-main>

    <!-- 新增用户对话框 -->
    <el-dialog v-model="addVisible" title="新增权限组" width="25%">
      <el-form
        label-position="right"
        label-width="120px"
        :model="addForm"
      >
        <el-form-item label="权限组/职位">
          <el-input v-model="addForm.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="add(false)">取消</el-button>
          <el-button type="primary" :loading="addLoading" @click="addUser()">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看权限对话框 -->
    <el-dialog v-model="viewVisible" title="查看权限组" width="25%">
      <el-form
        label-position="right"
        label-width="60px"
        :model="addForm"
      >
        <ElTree
          ref="tree"
          style="width: 100%;"
          :data="listData"
          :default-expand-all="true"
          :show-checkbox="true"
          :default-checked-keys="idsData"
          node-key="id"
        />
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="viewLoading" @click="edit">
            修改
          </el-button>
          <el-button @click="viewVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
